<!-- profile.html - 个人中心 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 待办事项管理系统</title>
    <link rel="stylesheet" href="css/navbar.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }
        
        .main-content {
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
        }
        
        .profile-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .profile-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 48px;
            font-weight: 600;
            margin: 0 auto 20px;
            box-shadow: 0 4px 24px rgba(102,126,234,0.25);
        }
        
        .profile-title {
            font-size: 2rem;
            font-weight: 700;
            color: #4a5568;
            margin-bottom: 10px;
        }
        
        .profile-subtitle {
            color: #718096;
            font-size: 1.1rem;
        }
        
        .profile-section {
            margin-bottom: 40px;
            background: rgba(245,247,250,0.85);
            border-radius: 12px;
            padding: 32px 24px 24px 24px;
            box-shadow: 0 2px 12px rgba(102,126,234,0.06);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #4a5568;
            margin-bottom: 24px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
            letter-spacing: 1px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #4a5568;
        }
        
        .form-group input {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s ease;
            background: #f7fafc;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            background: #fff;
        }
        
        .form-group input:disabled {
            background-color: #f7fafc;
            color: #718096;
        }
        
        .btn {
            padding: 14px 28px;
            border: none;
            border-radius: 24px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-right: 10px;
            box-shadow: 0 2px 8px rgba(102,126,234,0.08);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.18);
        }
        
        .btn-secondary {
            background: #e2e8f0;
            color: #4a5568;
        }
        
        .btn-secondary:hover {
            background: #cbd5e0;
        }
        
        .btn-danger {
            background: #f56565;
            color: white;
        }
        
        .btn-danger:hover {
            background: #e53e3e;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .stat-card {
            background: rgba(102, 126, 234, 0.12);
            padding: 24px 0 18px 0;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 2px 12px rgba(102,126,234,0.08);
            position: relative;
        }
        
        .stat-card .stat-icon {
            font-size: 2.2rem;
            margin-bottom: 8px;
            color: #667eea;
            display: block;
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #718096;
            font-weight: 500;
        }
        
        .message {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 500;
        }
        
        .message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .message.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .edit-mode .form-group input:not([disabled]) {
            border-color: #667eea;
        }
        
        .edit-mode .btn-edit {
            display: none;
        }
        
        .edit-mode .btn-save,
        .edit-mode .btn-cancel {
            display: inline-block;
        }
        
        .btn-edit {
            display: inline-block;
        }
        
        .btn-save,
        .btn-cancel {
            display: none;
        }
        
        .form-actions {
            margin-top: 18px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        @media (max-width: 768px) {
            .main-content {
                margin: 20px auto;
                padding: 0 8px;
            }
            
            .profile-card {
                padding: 18px 6px;
            }
            
            .profile-title {
                font-size: 1.2rem;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .btn {
                width: 100%;
                margin-bottom: 10px;
                margin-right: 0;
            }
            
            .profile-section {
                padding: 18px 6px 12px 6px;
            }
        }
    </style>
</head>
<body>
    <!-- 统一导航栏 -->
    <nav class="navbar">
        <div class="navbar-content">
            <a href="home.html" class="navbar-brand">
                <span class="brand-icon">🏠</span>
                <h1>待办事项管理系统</h1>
            </a>
            
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="home.html" class="nav-link">
                        <span class="nav-icon">🏠</span>
                        首页
                    </a>
                </li>
                <li class="nav-item">
                    <a href="user_index.html" class="nav-link">
                        <span class="nav-icon">📋</span>
                        待办事项
                    </a>
                </li>
                <li class="nav-item">
                    <a href="profile.html" class="nav-link active">
                        <span class="nav-icon">👤</span>
                        个人信息
                    </a>
                </li>
            </ul>
            
            <div class="user-section">
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">U</div>
                    <span class="user-name" id="userName">用户</span>
                </div>
                <button class="logout-btn" id="logoutBtn">
                    <span>🚪</span>
                    退出登录
                </button>
            </div>
        </div>
    </nav>

    <div class="main-content">
        <div class="profile-card">
            <div class="profile-header">
                <div class="profile-avatar" id="profileAvatar">U</div>
                <h1 class="profile-title">个人信息</h1>
                <p class="profile-subtitle">管理您的账户信息和设置</p>
            </div>

            <div id="messageContainer"></div>

            <div class="stats-grid">
                <div class="stat-card">
                    <span class="stat-icon">📋</span>
                    <div class="stat-number" id="totalTodos">0</div>
                    <div class="stat-label">总待办事项</div>
                </div>
                <div class="stat-card">
                    <span class="stat-icon">✅</span>
                    <div class="stat-number" id="completedTodos">0</div>
                    <div class="stat-label">已完成</div>
                </div>
                <div class="stat-card">
                    <span class="stat-icon">⏳</span>
                    <div class="stat-number" id="pendingTodos">0</div>
                    <div class="stat-label">进行中</div>
                </div>
            </div>

            <div class="profile-section">
                <h2 class="section-title">基本信息</h2>
                <form id="profileForm">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" disabled>
                    </div>
                    <div class="form-group">
                        <label for="userId">用户ID</label>
                        <input type="text" id="userId" disabled>
                    </div>
                    <div class="form-group">
                        <label for="newPassword">新密码</label>
                        <input type="password" id="newPassword" placeholder="输入新密码">
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认密码</label>
                        <input type="password" id="confirmPassword" placeholder="再次输入新密码">
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-primary btn-edit" onclick="enableEdit()">编辑信息</button>
                        <button type="submit" class="btn btn-primary btn-save">保存更改</button>
                        <button type="button" class="btn btn-secondary btn-cancel" onclick="cancelEdit()">取消</button>
                        <button type="button" class="btn btn-danger" onclick="deleteAccount()">删除账户</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="js/navbar.js"></script>
    <script>
        let originalUserData = null;

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 导航栏已经通过navbar.js初始化
            loadUserProfile();
            loadUserStats();
        });

        function loadUserProfile() {
            const currentUser = window.navbar.getCurrentUser();
            if (!currentUser) {
                showMessage('用户信息加载失败', 'error');
                return;
            }

            originalUserData = { ...currentUser };

            // 填充表单
            document.getElementById('username').value = currentUser.username || '';
            document.getElementById('userId').value = currentUser.userId || '';

            // 更新头像
            const avatarElement = document.getElementById('profileAvatar');
            if (avatarElement) {
                avatarElement.textContent = (currentUser.username || 'U').charAt(0).toUpperCase();
            }
        }

        async function loadUserStats() {
            const currentUser = window.navbar.getCurrentUser();
            if (!currentUser || !currentUser.userId) {
                return;
            }

            try {
                const response = await fetch(`/api/todos/user/${currentUser.userId}`);
                if (response.ok) {
                    const todos = await response.json();
                    
                    const total = todos.length;
                    const completed = todos.filter(todo => todo.status === '已完成').length;
                    const pending = total - completed;

                    document.getElementById('totalTodos').textContent = total;
                    document.getElementById('completedTodos').textContent = completed;
                    document.getElementById('pendingTodos').textContent = pending;
                }
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }

        function enableEdit() {
            document.getElementById('profileForm').classList.add('edit-mode');
            document.getElementById('newPassword').disabled = false;
            document.getElementById('confirmPassword').disabled = false;
        }

        function cancelEdit() {
            document.getElementById('profileForm').classList.remove('edit-mode');
            document.getElementById('newPassword').value = '';
            document.getElementById('confirmPassword').value = '';
            document.getElementById('newPassword').disabled = true;
            document.getElementById('confirmPassword').disabled = true;
        }

        function showMessage(message, type = 'info') {
            const container = document.getElementById('messageContainer');
            container.innerHTML = `<div class="message ${type}">${message}</div>`;
            
            // 3秒后自动隐藏
            setTimeout(() => {
                container.innerHTML = '';
            }, 3000);
        }

        // 表单提交处理
        document.getElementById('profileForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const currentUser = window.navbar.getCurrentUser();
            if (!currentUser) {
                showMessage('用户未登录', 'error');
                return;
            }

            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            // 验证密码
            if (newPassword && newPassword !== confirmPassword) {
                showMessage('两次输入的密码不一致', 'error');
                return;
            }

            if (newPassword && newPassword.length < 6) {
                showMessage('密码长度至少6位', 'error');
                return;
            }

            try {
                if (newPassword) {
                    // 修改密码
                    const response = await fetch('/api/user/change-password', {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: `userId=${currentUser.userId}&newPassword=${encodeURIComponent(newPassword)}`
                    });

                    if (response.ok) {
                        showMessage('密码修改成功', 'success');
                        cancelEdit();
                    } else {
                        showMessage('密码修改失败', 'error');
                    }
                } else {
                    showMessage('请输入新密码', 'info');
                }
            } catch (error) {
                console.error('修改密码错误:', error);
                showMessage('密码修改失败', 'error');
            }
        });

        async function deleteAccount() {
            const currentUser = window.navbar.getCurrentUser();
            if (!currentUser) {
                showMessage('用户未登录', 'error');
                return;
            }

            if (!confirm('确定要删除您的账户吗？此操作不可恢复！')) {
                return;
            }

            try {
                const response = await fetch(`/api/user/${currentUser.userId}`, {
                    method: 'DELETE'
                });

                if (response.ok) {
                    showMessage('账户删除成功', 'success');
                    setTimeout(() => {
                        window.navbar.logout();
                    }, 2000);
                } else {
                    showMessage('账户删除失败', 'error');
                }
            } catch (error) {
                console.error('删除账户错误:', error);
                showMessage('账户删除失败', 'error');
            }
        }
    </script>
</body>
</html>
